var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),y=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},i=(e,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of N(n))!u.call(e,c)&&c!==s&&l(e,c,{get:()=>n[c],enumerable:!(t=h(n,c))||t.enumerable});return e};var f=(e,n,s)=>(s=e!=null?m(k(e)):{},i(n||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),b=e=>i(l({},"__esModule",{value:!0}),e);var r=g((v,o)=>{o.exports=_jsx_runtime});var x={};y(x,{default:()=>d,frontmatter:()=>w});var a=f(r()),w={title:"Next.js\uC5D0\uC11C \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uC2A4\uD06C\uB864 \uC704\uCE58\uAC00 \uC720\uC9C0\uB418\uC9C0 \uC54A\uB294 \uBB38\uC81C \uD574\uACB0\uD558\uAE30",description:"Next.js \uD658\uACBD\uC5D0\uC11C \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uB85C \uC778\uD574 \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uC2A4\uD06C\uB864\uC774 \uCD5C\uC0C1\uB2E8\uC73C\uB85C \uAC00\uC9C0 \uC54A\uB294 \uBB38\uC81C\uB97C \uD574\uACB0\uD558\uB294 \uBC29\uBC95\uC744 \uC18C\uAC1C\uD55C\uB2E4.",tags:["Web Performance","Next.js","\uC2A4\uD06C\uB864 \uBB38\uC81C \uD574\uACB0","\uC6F9 \uC131\uB2A5 \uCD5C\uC801\uD654","\uC774\uBBF8\uC9C0 \uCD5C\uC801\uD654"],date:"2025-04-17",thumbnailUrl:"2025/layout-shift/thumbnail.png",category:"\u{1F4BB} Dev"};function p(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Next.js\uB85C \uAC1C\uBC1C\uD55C \uC6F9\uC0AC\uC774\uD2B8\uC5D0\uC11C \uD398\uC774\uC9C0\uB97C \uC774\uB3D9\uD560 \uB54C, \uC608\uC0C1\uACFC \uB2E4\uB974\uAC8C \uC2A4\uD06C\uB864\uC774 \uCD5C\uC0C1\uB2E8\uC774 \uC544\uB2C8\uB77C \uC774\uC804 \uD398\uC774\uC9C0\uC5D0\uC11C \uC0AC\uC6A9\uC790\uAC00 \uBCF4\uB358 \uCF58\uD150\uCE20 \uC704\uCE58 \uB610\uB294 \uD398\uC774\uC9C0 \uD558\uB2E8\uC73C\uB85C \uC720\uC9C0\uB418\uB294 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uB2E4."}),` `,(0,a.jsxs)(n.p,{children:["\uC6D0\uC778\uC744 \uC870\uC0AC\uD55C \uACB0\uACFC, \uC774\uB294 ",(0,a.jsx)(n.strong,{children:"\uCF58\uD150\uCE20 \uBC0F \uC774\uBBF8\uC9C0 \uB85C\uB529 \uACFC\uC815\uC5D0\uC11C \uBC1C\uC0DD\uD558\uB294 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8(Layout Shift)"})," \uB85C \uC778\uD574 \uD398\uC774\uC9C0\uC758 \uCF58\uD150\uCE20\uAC00 \uB4A4\uB2A6\uAC8C \uB85C\uB4DC\uB418\uBA70 \uC2A4\uD06C\uB864 \uC704\uCE58\uAC00 \uBCC0\uACBD\uB418\uC5C8\uAE30 \uB54C\uBB38\uC774\uC5C8\uB2E4. \uC989, \uCD08\uAE30 \uB80C\uB354\uB9C1 \uACFC\uC815\uC5D0\uC11C \uCF58\uD150\uCE20 \uBC0F \uC774\uBBF8\uC9C0 \uB192\uC774\uAC00 \uD655\uBCF4\uB418\uC9C0 \uC54A\uC544 \uBE0C\uB77C\uC6B0\uC800\uAC00 \uB80C\uB354\uB9C1 \uD6C4 \uC2A4\uD06C\uB864 \uC704\uCE58\uB97C \uB2E4\uC2DC \uACC4\uC0B0\uD55C \uACB0\uACFC\uC600\uB2E4."]}),` `,(0,a.jsx)(n.p,{children:"\uC774 \uAE00\uC5D0\uC11C\uB294 \uC2E4\uC81C\uB85C \uB0B4\uAC00 \uACBD\uD5D8\uD588\uB358 \uC774\uB7EC\uD55C \uBB38\uC81C \uC0C1\uD669\uACFC \uC774\uB97C \uD574\uACB0\uD558\uAE30 \uC704\uD574 \uC801\uC6A9\uD55C \uCD5C\uC801\uD654 \uBC29\uBC95\uC744 \uC18C\uAC1C\uD55C\uB2E4."}),` `,(0,a.jsxs)(n.h2,{id:"\uCF58\uD150\uCE20-\uC811\uAE30\uD3BC\uCE58\uAE30-\uAE30\uB2A5\uC5D0\uC11C\uC758-\uB808\uC774\uC544\uC6C3-\uC2DC\uD504\uD2B8-\uBB38\uC81C",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uCF58\uD150\uCE20-\uC811\uAE30\uD3BC\uCE58\uAE30-\uAE30\uB2A5\uC5D0\uC11C\uC758-\uB808\uC774\uC544\uC6C3-\uC2DC\uD504\uD2B8-\uBB38\uC81C",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uCF58\uD150\uCE20 \uC811\uAE30\xB7\uD3BC\uCE58\uAE30 \uAE30\uB2A5\uC5D0\uC11C\uC758 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8 \uBB38\uC81C"]}),` `,(0,a.jsxs)(n.p,{children:["\uC6F9\uD398\uC774\uC9C0\uC758 \uB2E4\uC591\uD55C \uCF58\uD150\uCE20 \uC911, \uC124\uBA85\uC774\uB098 \uBCF8\uBB38 \uB0B4\uC6A9\uC774 \uAE38\uC5B4\uC9C8 \uB54C \uD754\uD788 \uC0AC\uC6A9\uB418\uB294 \uAE30\uB2A5\uC774 ",(0,a.jsx)(n.strong,{children:"\uC811\uAE30\xB7\uD3BC\uCE58\uAE30(toggle)"})," \uAE30\uB2A5\uC774\uB2E4. \uC774 \uAE30\uB2A5\uC744 \uAD6C\uD604\uD560 \uB54C \uC790\uC8FC \uBC1C\uC0DD\uD558\uB294 \uBB38\uC81C\uB294 \uCD08\uAE30 \uB80C\uB354\uB9C1 \uD6C4 \uCF58\uD150\uCE20\uC758 \uB192\uC774\uAC00 \uC81C\uD55C\uB418\uBA74\uC11C \uBC1C\uC0DD\uD558\uB294 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8 \uD604\uC0C1\uC774\uB2E4."]}),` `,(0,a.jsxs)(n.h3,{id:"\uBB38\uC81C-\uC6D0\uC778",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uBB38\uC81C-\uC6D0\uC778",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uBB38\uC81C \uC6D0\uC778"]}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:"\uCF58\uD150\uCE20\uC758 \uB192\uC774\uAC00 \uC815\uD574\uC9C0\uC9C0 \uC54A\uC740 \uCC44\uB85C \uB80C\uB354\uB9C1\uB41C \uD6C4 JavaScript\uB098 CSS\uB85C \uB192\uC774\uAC00 \uC81C\uD55C\uB418\uBA74\uC11C \uB808\uC774\uC544\uC6C3\uC774 \uC21C\uAC04\uC801\uC73C\uB85C \uBCC0\uACBD\uB41C\uB2E4."}),` `,(0,a.jsx)(n.li,{children:"\uBE0C\uB77C\uC6B0\uC800\uAC00 \uB192\uC774\uB97C \uB450 \uBC88 \uC774\uC0C1 \uACC4\uC0B0\uD558\uAC8C \uB418\uBA74\uC11C, \uC0AC\uC6A9\uC790\uAC00 \uBCF4\uB358 \uC2A4\uD06C\uB864 \uC704\uCE58\uAC00 \uBCC0\uACBD\uB41C\uB2E4."}),` `]}),` `,(0,a.jsx)(n.p,{children:"\uC544\uB798\uB294 \uC608\uC2DC \uCF54\uB4DC\uC774\uB2E4."}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token string",children:'"use client"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useRef ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:["styled",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," css ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"styled-components"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"MINIMUM_DESCRIPTION_HEIGHT"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"125"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"DescriptionText"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," styled",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"span"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," isOpen",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"boolean"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" "}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," isOpen ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"=>"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsxs)(n.span,{className:"token interpolation",children:[" ",(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"isOpen ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsxs)(n.span,{className:"token interpolation",children:[" css",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` max-height: 125px; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` overflow: hidden; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` word-break: break-all; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" "}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ToggleButton"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," styled",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"button"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," visible",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"boolean"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" visibility: "}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," visible ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"visible ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"visible"'})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"hidden"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:`; `})]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,a.jsx)(n.span,{className:"token class-name",children:"TextProps"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" description",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"Text"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," description ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TextProps"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"showToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setShowToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"isToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," descriptionRef ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsxs)(n.span,{className:"token generic-function",children:[(0,a.jsx)(n.span,{className:"token function",children:"useRef"}),(0,a.jsxs)(n.span,{className:"token generic class-name",children:[(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"HTMLSpanElement",(0,a.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleToggle"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setToggleDescription"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"prev ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"prev",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useLayoutEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isToggleDescription ",(0,a.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"descriptionRef",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," scrollHeight ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," descriptionRef",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setShowToggle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"scrollHeight ",(0,a.jsx)(n.span,{className:"token operator",children:">"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"MINIMUM_DESCRIPTION_HEIGHT"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"isToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"DescriptionText"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"ref"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"descriptionRef",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"isOpen"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"showToggle ",(0,a.jsx)(n.span,{className:"token operator",children:"||"})," isToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"dangerouslySetInnerHTML"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" __html",(0,a.jsx)(n.span,{className:"token operator",children:":"})," description",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ToggleButton"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"button",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"visible"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"showToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"handleToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isToggleDescription ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"\uC811\uAE30"'})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"\uB354\uBCF4\uAE30"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Text"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h3,{id:"\uD574\uACB0-\uBC29\uBC95",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uD574\uACB0-\uBC29\uBC95",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0 \uBC29\uBC95"]}),` `,(0,a.jsxs)(n.p,{children:["\uC774 \uBB38\uC81C\uB97C \uD6A8\uACFC\uC801\uC73C\uB85C \uBC29\uC9C0\uD558\uB294 \uBC29\uBC95\uC740 ",(0,a.jsx)(n.strong,{children:"\uB192\uC774\uB97C \uC81C\uC5B4\uD558\uB294 \uAE30\uB2A5\uACFC \uCF58\uD150\uCE20 \uB80C\uB354\uB9C1\uC744 \uBD84\uB9AC\uD558\uB294 \uAC83"}),"\uC774\uB2E4. \uC989, \uCF58\uD150\uCE20\uB97C \uB2F4\uB294 \uCEE8\uD14C\uC774\uB108 \uC694\uC18C\uC5D0\uC11C \uCD5C\uB300 \uB192\uC774(max-height)\uB97C \uBBF8\uB9AC \uC9C0\uC815\uD558\uACE0, CSS\uC758 overflow \uC18D\uC131\uC744 \uD1B5\uD574 \uCF58\uD150\uCE20\uB97C \uAC10\uCD94\uB294 \uBC29\uC2DD\uC744 \uC801\uC6A9\uD55C\uB2E4."]}),` `,(0,a.jsx)(n.p,{children:"\uC608\uB97C \uB4E4\uBA74 \uC544\uB798\uC640 \uAC19\uC740 \uAD6C\uC870\uB85C \uC801\uC6A9\uD560 \uC218 \uC788\uB2E4."}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token string",children:'"use client"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useRef ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:["styled",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," css ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"styled-components"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"MINIMUM_DESCRIPTION_HEIGHT"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"125"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"DescriptionContainer"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," styled",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"div"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," isOpen",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"boolean"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" "}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," isOpen ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"=>"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsxs)(n.span,{className:"token interpolation",children:[" ",(0,a.jsx)(n.span,{className:"token operator",children:"!"}),`isOpen `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsxs)(n.span,{className:"token interpolation",children:[" ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," css",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` max-height: 125px; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` overflow: hidden; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` word-break: break-all; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" "}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsxs)(n.span,{className:"token interpolation",children:[" ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," css",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token interpolation",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` height: auto; `})})})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" "}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"DescriptionText"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," styled",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"span"}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ToggleButton"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," styled",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"button"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," visible",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"boolean"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:" visibility: "}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," visible ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"visible ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"visible"'})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"hidden"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:`; `})]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,a.jsx)(n.span,{className:"token class-name",children:"TextProps"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" description",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"Text"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," description ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TextProps"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"showToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setShowToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"isToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," descriptionRef ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsxs)(n.span,{className:"token generic-function",children:[(0,a.jsx)(n.span,{className:"token function",children:"useRef"}),(0,a.jsxs)(n.span,{className:"token generic class-name",children:[(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"HTMLDivElement",(0,a.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleToggle"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setToggleDescription"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"prev ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"prev",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useLayoutEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isToggleDescription ",(0,a.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"!"}),"descriptionRef",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," scrollHeight ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," descriptionRef",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setShowToggle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"scrollHeight ",(0,a.jsx)(n.span,{className:"token operator",children:">"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"MINIMUM_DESCRIPTION_HEIGHT"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"isToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"DescriptionTextContainer"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"ref"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"descriptionRef",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"isOpen"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isToggleDescription",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"DescriptionText"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"dangerouslySetInnerHTML"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" __html",(0,a.jsx)(n.span,{className:"token operator",children:":"})," description",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ToggleButton"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"button",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"visible"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"showToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"handleToggle",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isToggleDescription ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"\uC811\uAE30"'})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"\uB354\uBCF4\uAE30"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Text"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"\uC774 \uBC29\uC2DD\uC744 \uD1B5\uD574 \uCD08\uAE30 \uB80C\uB354\uB9C1 \uC2DC\uC5D0\uB3C4 \uCF58\uD150\uCE20\uC758 \uB192\uC774\uAC00 \uD655\uBCF4\uB418\uAE30 \uB54C\uBB38\uC5D0, \uC811\uAE30\xB7\uD3BC\uCE58\uAE30 \uB3D9\uC791 \uC2DC\uC5D0\uB3C4 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8 \uC5C6\uC774 \uC790\uC5F0\uC2A4\uB7FD\uAC8C \uCF58\uD150\uCE20\uAC00 \uD45C\uC2DC\uB41C\uB2E4."}),` `,(0,a.jsxs)(n.h2,{id:"\uC774\uBBF8\uC9C0-\uB80C\uB354\uB9C1-\uC2DC-\uBC1C\uC0DD\uD558\uB294-\uB808\uC774\uC544\uC6C3-\uC2DC\uD504\uD2B8-\uBB38\uC81C",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uC774\uBBF8\uC9C0-\uB80C\uB354\uB9C1-\uC2DC-\uBC1C\uC0DD\uD558\uB294-\uB808\uC774\uC544\uC6C3-\uC2DC\uD504\uD2B8-\uBB38\uC81C",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uC774\uBBF8\uC9C0 \uB80C\uB354\uB9C1 \uC2DC \uBC1C\uC0DD\uD558\uB294 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8 \uBB38\uC81C"]}),` `,(0,a.jsxs)(n.p,{children:["\uC6F9\uC0AC\uC774\uD2B8\uB97C \uC81C\uC791\uD560 \uB54C \uC774\uBBF8\uC9C0 \uB85C\uB529\uC73C\uB85C \uC778\uD55C \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uB294 \uB9E4\uC6B0 \uD754\uD55C \uBB38\uC81C\uC774\uB2E4. \uD2B9\uD788 \uC774\uBBF8\uC9C0\uC758 height\uB97C ",(0,a.jsx)(n.code,{children:"auto"}),"\uB85C \uC124\uC815\uD558\uB294 \uACBD\uC6B0, \uC774\uBBF8\uC9C0\uB97C \uB85C\uB529\uD558\uB294 \uB3D9\uC548\uC5D0\uB294 \uB192\uC774\uAC00 \uD655\uBCF4\uB418\uC9C0 \uC54A\uC544 \uB808\uC774\uC544\uC6C3\uC774 \uAC11\uC790\uAE30 \uBCC0\uACBD\uB420 \uC218 \uC788\uB2E4."]}),` `,(0,a.jsxs)(n.h3,{id:"\uBB38\uC81C-\uC6D0\uC778-1",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uBB38\uC81C-\uC6D0\uC778-1",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uBB38\uC81C \uC6D0\uC778"]}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:"\uC774\uBBF8\uC9C0\uC758 \uC2E4\uC81C \uD06C\uAE30\uB97C \uBE0C\uB77C\uC6B0\uC800\uAC00 \uBBF8\uB9AC \uC54C \uC218 \uC5C6\uAE30 \uB54C\uBB38\uC5D0 \uB85C\uB529 \uC804\uC5D0\uB294 \uB192\uC774\uAC00 0\uC73C\uB85C \uC124\uC815\uB418\uC5B4 \uC788\uB2E4."}),` `,(0,a.jsx)(n.li,{children:"\uC774\uBBF8\uC9C0 \uB2E4\uC6B4\uB85C\uB4DC\uAC00 \uC644\uB8CC\uB41C \uD6C4 \uC2E4\uC81C \uB192\uC774\uB85C \uBCC0\uACBD\uB418\uBA74\uC11C \uCF58\uD150\uCE20\uAC00 \uBC00\uB9AC\uB294 \uD604\uC0C1\uC774 \uBC1C\uC0DD\uD55C\uB2E4."}),` `]}),` `,(0,a.jsxs)(n.h3,{id:"\uD574\uACB0-\uBC29\uBC95-1",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uD574\uACB0-\uBC29\uBC95-1",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0 \uBC29\uBC95"]}),` `,(0,a.jsx)(n.p,{children:"\uC774 \uBB38\uC81C\uB97C \uD574\uACB0\uD558\uB824\uBA74 \uC774\uBBF8\uC9C0\uB97C \uB85C\uB529\uD558\uB294 \uB3D9\uC548\uC5D0\uB3C4 \uACF5\uAC04\uC744 \uBBF8\uB9AC \uD655\uBCF4\uD574 \uB450\uB294 \uAC83\uC774 \uC911\uC694\uD558\uB2E4. \uC2E4\uC81C \uAC1C\uBC1C \uD658\uACBD\uC5D0\uC11C\uB294 \uC774\uBBF8\uC9C0\uC758 \uB108\uBE44(width)\uAC00 \uC815\uD574\uC9C4 \uC0C1\uD0DC\uC5D0\uC11C, \uB192\uC774(height)\uB97C \uC774\uBBF8\uC9C0 \uBE44\uC728(aspect ratio)\uC5D0 \uB530\uB77C \uB9DE\uCD94\uB294 \uBC29\uC2DD\uC774 \uC77C\uBC18\uC801\uC774\uB2E4."}),` `,(0,a.jsxs)(n.p,{children:["Next.js \uD658\uACBD\uC5D0\uC11C\uB294 \uC544\uB798\uCC98\uB7FC \uC774\uBBF8\uC9C0 \uCD5C\uC801\uD654 \uCEF4\uD3EC\uB10C\uD2B8\uC778 ",(0,a.jsx)(n.code,{children:"next/image"}),"\uB97C \uC0AC\uC6A9\uD558\uBA74 \uAC04\uB2E8\uD788 \uD574\uACB0\uD560 \uC218 \uC788\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"next/image"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"Example"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"SIZE"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"100"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"ASPECT_RATIO"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"1.45"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token comment",children:"/* \uC678\uBD80 \uC11C\uBC84\uC5D0\uC11C \uC774\uBBF8\uC9C0\uB97C \uD638\uCD9C\uD558\uBA74 base64\uB85C blur \uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC640\uC57C\uD568 */"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"DEFAULT_BLUR_DATA_URL"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token string",children:'"data:image/png;base64,..."'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Image"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"https://example.jpg",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"\uC608\uC2DC \uC774\uBBF8\uC9C0",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"sizes"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"(max-width: 768px) 100vw, 50vw",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"placeholder"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"blur",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"blurDataURL"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token constant",children:"DEFAULT_BLUR_DATA_URL"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token constant",children:"SIZE"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token constant",children:"SIZE"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"ASPECT_RATIO"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"auto"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" maxHeight",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"SIZE"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"ASPECT_RATIO"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["\uC774 \uBC29\uC2DD\uC740 \uC774\uBBF8\uC9C0\uB97C \uB85C\uB529\uD558\uAE30 \uC804\uBD80\uD130 \uACF5\uAC04\uC744 \uC548\uC815\uC801\uC73C\uB85C \uD655\uBCF4\uD558\uBA70, ",(0,a.jsx)(n.code,{children:"sizes"})," \uC18D\uC131\uC744 \uD1B5\uD574 \uCD5C\uC801\uC758 \uC774\uBBF8\uC9C0 \uD06C\uAE30\uB97C \uC9C0\uC815\uD558\uBA74 \uB85C\uB529 \uC131\uB2A5\uC744 \uB354\uC6B1 \uB192\uC77C \uC218 \uC788\uB2E4."]}),` `,(0,a.jsxs)(n.p,{children:["\uC704 \uCF54\uB4DC\uCC98\uB7FC, \uC774\uBBF8\uC9C0\uB97C \uD3EC\uD568\uD55C \uCEE8\uD14C\uC774\uB108 \uC694\uC18C\uC5D0 \uBBF8\uB9AC \uC774\uBBF8\uC9C0\uAC00 \uCC28\uC9C0\uD560 \uACF5\uAC04\uC744 \uD655\uBCF4\uD558\uACE0, \uBE0C\uB77C\uC6B0\uC800\uAC00 \uC774\uBBF8\uC9C0\uB97C \uB85C\uB4DC\uD558\uAE30 \uC804\uC5D0\uB3C4 \uACF5\uAC04\uC744 \uC720\uC9C0\uD558\uB3C4\uB85D \uD558\uBA74 \uB41C\uB2E4. \uB610\uD55C \uC774\uBBF8\uC9C0 \uD06C\uAE30 \uBB38\uC81C\uAC00 \uC788\uC744 \uACBD\uC6B0, Next.js\uC758 ",(0,a.jsx)(n.code,{children:"sizes"})," \uC18D\uC131\uC744 \uC0AC\uC6A9\uD574 \uBBF8\uB9AC \uCD5C\uC801\uC758 \uD06C\uAE30\uB97C \uC9C0\uC815\uD574\uB450\uBA74 \uC774\uBBF8\uC9C0 \uB85C\uB529 \uC131\uB2A5 \uB610\uD55C \uD5A5\uC0C1\uB420 \uC218 \uC788\uC5C8\uB2E4."]}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"/images/2025/layout-shift/image.png",alt:"image"})}),` `,(0,a.jsxs)(n.p,{children:["\uC2E4\uC81C\uB85C \uC774\uBBF8\uC9C0 \uD3EC\uB9F7\uC744 webp\uB85C \uBCC0\uD658\uD558\uACE0 lazy loading\uC744 \uC801\uC6A9\uD588\uB354\uB2C8, \uC774\uBBF8\uC9C0 \uB9AC\uC18C\uC2A4 \uD06C\uAE30\uB294 ",(0,a.jsx)(n.strong,{children:"6.2MB \u2192 4.8MB\uB85C \uAC10\uC18C"}),"\uD588\uACE0 \uB85C\uB529 \uC18D\uB3C4\uB3C4 ",(0,a.jsx)(n.strong,{children:"1.63\uCD08\uC5D0\uC11C 204ms\uB85C \uB300\uD3ED \uAC1C\uC120"}),"\uD588\uB2E4."]}),` `,(0,a.jsxs)(n.h2,{id:"\uC131\uB2A5-\uAC1C\uC120-\uACB0\uACFC",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uC131\uB2A5-\uAC1C\uC120-\uACB0\uACFC",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uC131\uB2A5 \uAC1C\uC120 \uACB0\uACFC"]}),` `,(0,a.jsx)(n.p,{children:"\uC704 \uBC29\uBC95\uC744 \uC801\uC6A9\uD55C \uACB0\uACFC, \uC6F9\uC0AC\uC774\uD2B8\uC758 \uC804\uBC18\uC801\uC778 \uC131\uB2A5 \uC9C0\uD45C\uAC00 \uB2E4\uC74C\uACFC \uAC19\uC774 \uAC1C\uC120\uB418\uC5C8\uB2E4."}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{src:"/images/2025/layout-shift/web-performance.png",alt:"web-performance"})}),` `,(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"\uD56D\uBAA9"}),(0,a.jsx)(n.th,{children:"\uAC1C\uC120 \uC804"}),(0,a.jsx)(n.th,{children:"\uAC1C\uC120 \uD6C4"}),(0,a.jsx)(n.th,{children:"\uBCC0\uD654"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"First Contentful Paint"}),(0,a.jsx)(n.td,{children:"0.3\uCD08"}),(0,a.jsx)(n.td,{children:"0.3\uCD08"}),(0,a.jsx)(n.td,{children:"\uB3D9\uC77C"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"Largest Contentful Paint"}),(0,a.jsx)(n.td,{children:"3.5\uCD08"}),(0,a.jsx)(n.td,{children:"2.7\uCD08"}),(0,a.jsxs)(n.td,{children:[(0,a.jsx)(n.span,{role:"img","aria-label":"thumbs up",children:"\u{1F44D}"})," 0.8\uCD08 \uAC10\uC18C \u2192 \uC8FC\uC694 \uCF58\uD150\uCE20 \uD45C\uC2DC \uC2DC\uAC04 \uAC1C\uC120"]})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"Total Blocking Time"}),(0,a.jsx)(n.td,{children:"90ms"}),(0,a.jsx)(n.td,{children:"80ms"}),(0,a.jsxs)(n.td,{children:[(0,a.jsx)(n.span,{role:"img","aria-label":"down button",children:"\u{1F53D}"})," \uAC1C\uC120 (main thread blocking \uC904\uC5C8\uC74C)"]})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"Speed Index"}),(0,a.jsx)(n.td,{children:"3.4\uCD08"}),(0,a.jsx)(n.td,{children:"1.9\uCD08"}),(0,a.jsxs)(n.td,{children:[(0,a.jsx)(n.span,{role:"img","aria-label":"fire",children:"\u{1F525}"})," \uB300\uD3ED \uAC1C\uC120 (\uC0AC\uC6A9\uC790 \uCCB4\uAC10 \uB85C\uB529 \uC18D\uB3C4 \uD5A5\uC0C1)"]})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"Cumulative Layout Shift"}),(0,a.jsx)(n.td,{children:"0"}),(0,a.jsx)(n.td,{children:"0.002"}),(0,a.jsx)(n.td,{children:"\uC0AC\uC2E4\uC0C1 \uB3D9\uC77C (shift \uAC70\uC758 \uC5C6\uC74C)"})]})]})]}),` `,(0,a.jsxs)(n.h2,{id:"\uB9C8\uBB34\uB9AC",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uB9C8\uBB34\uB9AC",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uB9C8\uBB34\uB9AC"]}),` `,(0,a.jsx)(n.p,{children:"Next.js \uD658\uACBD\uC5D0\uC11C \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uC2A4\uD06C\uB864 \uC704\uCE58\uAC00 \uC62C\uBC14\uB974\uAC8C \uC720\uC9C0\uB418\uC9C0 \uC54A\uB294 \uBB38\uC81C\uB294 \uB300\uBD80\uBD84 \uB808\uC774\uC544\uC6C3 \uC2DC\uD504\uD2B8\uC5D0\uC11C \uBE44\uB86F\uB41C\uB2E4. \uCF58\uD150\uCE20 \uBC0F \uC774\uBBF8\uC9C0 \uB85C\uB529 \uBC29\uC2DD\uC744 \uCD5C\uC801\uD654\uD558\uBA74 \uC774 \uBB38\uC81C\uB97C \uD6A8\uACFC\uC801\uC73C\uB85C \uD574\uACB0\uD560 \uC218 \uC788\uC744 \uBFD0\uB9CC \uC544\uB2C8\uB77C, \uC6F9\uC0AC\uC774\uD2B8 \uC131\uB2A5\uACFC \uC0AC\uC6A9\uC790 \uACBD\uD5D8 \uB610\uD55C \uD06C\uAC8C \uAC1C\uC120\uD560 \uC218 \uC788\uB2E4."}),` `,(0,a.jsx)(n.p,{children:"\uC774\uBC88 \uAE00\uC5D0\uC11C \uC18C\uAC1C\uD55C \uBC29\uBC95\uC774 \uBE44\uC2B7\uD55C \uBB38\uC81C\uB97C \uACAA\uACE0 \uC788\uB294 \uAC1C\uBC1C\uC790\uC5D0\uAC8C \uB3C4\uC6C0\uC774 \uB418\uAE38 \uBC14\uB780\uB2E4."})]})}function d(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}return b(x);})(); ;return Component;

웹 성능 최적화

Next.js에서 페이지 이동 시 스크롤 위치가 유지되지 않는 문제 해결하기